<template>
  <div style="height:150px">
  <div style="position: absolute">{{titleText}}</div>
  <div style="width:100%;height:100%;" :id="id"></div>
  <div v-if="piestyle=='1'" style="position: absolute;right:16px;top: 16px;">
    <RadioGroup v-model="button" type="button" size="small" :on-change="isActive()">
      <Radio label="0">住</Radio>
      <Radio label="1">商</Radio>
      <Radio label="2">写</Radio>
    </RadioGroup>
  </div>
  </div>
</template>

<script>
  const echarts = require('echarts');

  export default {
    name: 'dataSourcePie',
    props: {
      titleText: String,
      id:String,
      hasLegend: {
        type:String,
        default: "true"
      },
      piestyle:String
    },

    data () {
      return {
        button:"0"
      };
    },
   methods:{
      isActive(){
        console.info(this.button);
      }
    },
    mounted () {
    this.$nextTick(() => {
        var dataSourcePie = echarts.init(document.getElementById(this.id));
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            x: '60%',
            y:'25%',
            data: ['有效', '我售', '流失', '暂缓']
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          series: [
            {
              name: this.titleText,
              type: 'pie',
              radius: ['30%', '60%'],
              label: {
                normal: {
                  show: false,
                  position: 'center'
                }
              },
              center: ['30%', '60%'],
              data: [
                {value: 2103456, name: '有效', itemStyle: {normal: {color: '#9bd598'}}},
                {value: 798403, name: '我售', itemStyle: {normal: {color: '#ab8df2'}}},
                {value: 1305923, name: '流失', itemStyle: {normal: {color: '#ffd58f'}}},
                {value: 543250, name: '暂缓', itemStyle: {normal: {color: '#abd5f2'}}},
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        dataSourcePie.setOption(option);
        if(this.piestyle=="1") {

          dataSourcePie.setOption({
            legend:{
              data:['出售', '出租']
            },
            series:[{
              data: [
                {value: 2103456, name: '出售', itemStyle: {normal: {color: '#9bd598'}}},
                {value: 798403, name: '出租', itemStyle: {normal: {color: '#ab8df2'}}},
              ]
            }]
          });
        }
        window.addEventListener('resize', function () {
          dataSourcePie.resize();
        });
        dataSourcePie.resize();
      });
    }
  };
</script>
